<template>
	<view :class="type === 1? 'userComAll' : 'HBComAll'">
		<view v-if="!isWarn" class="warn" @click="resend">
			<image :src="warnIcon" mode="aspectFit"/>
		</view>
		<view class="userComAllBox">
			<text>{{message}}</text>
		</view>
		<view class="triangle">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			message: String,
			type: Number,
			isWarn: Boolean,
			indexID:Number,
		},
		data() {
			return {
				warnIcon:require('@/static/icon/wran.png')
			}
		},
		methods:{
			resend(){
				if(!this.isWarn) {
					this.$emit('reSend', this.indexID)
				}
			}
		}
	}
</script>

<style scoped>
	.userComAll {
		width: 100%;
		/* margin: 40upx 0; */
		justify-content: flex-end;
		display: flex;
		position: relative;
	}

	.userComAll .userComAllBox {
		border-radius: 15upx;
		padding: 17upx 30upx;
		background-color: #ffc8c7;
		margin-right: 13.33upx;
		display: flex;
		max-width:70%;
	}
	.userComAll .userComAllBox text{
		color:#333333;
		font-size: 24upx;
		margin: auto 0;
		word-break: break-all;
	}

	.userComAll .triangle {
		top:20upx;
		position: absolute;
		width: 0;
		height: 0;
		border-width: 13.33upx 0 13.33upx 13.33upx;
		border-style: solid;
		border-color: transparent transparent transparent  #ffc8c7;
	}
	
	.HBComAll{
		width: 100%;
		justify-content: flex-start;
		display: flex;
		position: relative;
	}
	.HBComAll .userComAllBox {
		border-radius: 15upx;
		padding: 17upx 30upx;
		background-color: #ffc8c7;
		margin-left: 13.33upx;
		display: flex;
		max-width:70%;
	}
	.HBComAll .userComAllBox text{
		color:#333333;
		font-size: 24upx;
		margin: auto 0;
		word-break: break-all;
	}
	
	.HBComAll .triangle {
		top:20upx;
		position: absolute;
		width: 0;
		height: 0;
		border-width: 13.33upx 13.33upx 13.33upx 0;
		border-style: solid;
		border-color: transparent #ffc8c7 transparent transparent;
	}
	.userComAll .warn{
		display: flex;
		margin-right: 20upx;
	}
	.HBComAll .warn{
		display: flex;
		margin-left: 20upx;
	}
	.warn image{
		width:40upx;
		height:40upx;
		margin: auto 0;
	}
</style>
